<template>
  <div>
    <el-image-viewer
      :url-list="imageList"
      v-if="showImageViewer"
      @close="showImageViewer = false"
    />
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const imageList = ref([])

const showImageViewer = ref(false)

const handlePreview = url => {
  imageList.value = [url]
  showImageViewer.value = true
}

const props = defineProps({
  image: {
    type: String
  }
})

watch(
  () => props.image,
  () => {
    handlePreview(props.image)
  }
)
</script>

<style scoped lang="scss"></style>
